<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="flexleft">
				<div class="positionr margin_right1">
					<img class="userImg" :src="dataAll.avatar" alt="">
					<!-- <div class="stateBox" v-if="dataAll.status == 'normal'"></div>
					<div class="nostateBox" v-else></div> -->
				</div>
				<div>
					<div class="text_at color_three">{{ dataAll.username }}</div>
					<div class="text_d color_six word_wrap margin_top2">{{ dataAll.description }}
					</div>
				</div>
			</div>
			<div class="mainpadding ffffff radius margin_top5">
				<!-- 描述 -->
				<div class="flex">
					<div class="text_d color_zero white_nowrap margin_right5 margin_top1">描述：</div>
					<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" show-word-limit
						maxlength="150" placeholder="请输入内容" v-model="content">
					</el-input>
				</div>
				<!-- 图片 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">上传图片：</div>
					<el-form label-width="0px">
						<el-form-item>
							<el-upload :headers="{
						'Token':tokens
					}" class="avatar-uploader" action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false"
							 multiple	:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
							<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传4张图片</font>
						</el-form-item>
						<el-form-item>
							<ul class="flexleft">
								<li v-for="(item,index) in ossFileUploads" :key="index"  style="position: relative;" class="noImage margin_right1 pointer">
									<img :src="item.filePath.fullurl" class="noImage"  @click.stop="dialogVisible=true;dialogImageUrl=item.filePath.fullurl;">
									<i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;" class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
								</li>
							</ul>
						</el-form-item>
					</el-form>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
				<!-- 视频 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">上传视频：</div>
					<el-form label-width="0px">
						<el-form-item>
							<el-upload :headers="{
						'Token':tokens
					}" class="avatar-uploader" action="http://kaoshi.kongzhongwangluo.top/api/common/upload" :show-file-list="false"
								:on-success="handlevideoSuccess" :before-upload="beforevideoUpload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
							<font class="upload-text">只能上传mp4文件，且不超过100MB，最多可以上传1条视频</font>
						</el-form-item>
						<el-form-item v-if="videourl">
							<video :src="videourl" controls  type="video/mp4" style="width: 300px;height: 150px;"></video>
						</el-form-item>
					</el-form>
				</div>
				<!-- 视频讲解 -->
				<div class="flex margin_top2">
					<div class="text_d color_zero white_nowrap margin_right2">视频讲解：</div>
					<div>
						<el-radio-group v-model="is_need_video">
							<el-radio label="0">是</el-radio>
							<el-radio label="1">随便</el-radio>
						</el-radio-group>
					</div>
				</div>
				<!-- 奖励价格 -->
				<div class="flex margin_top2 width43">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">奖励价格：</div>
					<div class="priceBox flex">
						<input type="text" placeholder="请输入奖励价格" v-model="price">
						<div class="text_d color_red margin_right1 margin_left1">元</div>
					</div>
				</div>
				<!-- 回答时间 -->
				<div class="flex margin_top2 width50">
					<div class="text_d color_zero white_nowrap margin_right2 margin_top1">回答时间：</div>
					<div class="flexleft flex_wrap">
						<div class="pointer" :class="duration == 10 ? 'active' : 'noActive'" @click="duration = 10">10分钟
						</div>
						<div class="pointer" :class="duration == 20 ? 'active' : 'noActive'" @click="duration = 20">20分钟
						</div>
						<div class="pointer" :class="duration == 30 ? 'active' : 'noActive'" @click="duration = 30">30分钟
						</div>
						<div class="pointer" :class="duration == 40 ? 'active' : 'noActive'" @click="duration = 40">40分钟
						</div>
					</div>
				</div>
				<!-- 支付方式 -->
				<div class="margin_top flexleft">
					<div class="text_d color_zero margin_right2">支付方式</div>
					<div class="pointer" :class="pay_type==1?'wayActive margin_right2':'way margin_right2'" @click="pay_type=1">
						<img class="weixinImg" src="../../static/image/home/weixinPay.png" alt="">
						<div class="text_d color_zero">微信支付</div>
					</div>
					<div class="pointer" :class="pay_type==3?'wayActive margin_right2':'way margin_right2'" @click="pay_type=3">
						<img class="balanceImg" src="../../static/image/home/balance.png" alt="">
						<div class="text_d color_zero">余额支付</div>
					</div>
				</div>
				<div class="submitBox margin_top pointer" @click="submitall">立即发布</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		teacher_detail,
		submit_teacher_detail,
		gotopay
	} from "@/API/question"
	
	export default {
		data() {
			return {
				pay_type:1,
				content: "",
				is_need_video: "0",
				duration: "10",
				price: "",
				dataAll: {},
				listid: "",
				// 上传图片
				ossFileUploads: [], //图片
				tokens:"",
				dialogVisible:false,
				dialogImageUrl:"",
				videourl:"",
			}
		},
		mounted() {
			this.listid = this.$route.query.id
			this.tokens = localStorage.getItem("token")
			this.getDetail()
		},
		methods: {
			// 上传图片
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是jpg或者png格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file) {
				if (res.code !== 1) {
					this.$message.error(res.msg);
					return false;
				}
				// 图片上传成功，添加到图片数组中，进行渲染
				if(this.ossFileUploads.length<4){
					// 图片上传成功，添加到图片数组中，进行渲染
					this.ossFileUploads.push({
						filePath: res.data,
						type: "blood",
						dataId: file.uid
					})
				}else{
					this.$message.warning('上传头像最多上传4张');
				}
			},
			// 删除图片
			handlerDel(item, index) {
				this.ossFileUploads.splice(index, 1)
				this.$message.success('删除成功')
			},
			// 上传视频
			beforevideoUpload(file) {
				const isJPG = file.type === 'video/mp4';
				const isLt2M = file.size / 1024 / 1024 < 100;
				if (!isJPG) {
					this.$message.error('上传视频只能是mp4格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传视频大小不能超过 100MB!');
				}
				return isJPG && isLt2M;
			},
			handlevideoSuccess(res, file) {
				if (res.code !== 1) {
					this.$message.error(res.msg);
					return false;
				}
				this.videourl = res.data.fullurl
			},
			submitall(){
				if(this.content==""){
					this.$message.warning("请输入描述")
					return false
				}
				if(this.price=="" || Number(this.price)==0){
					this.$message.warning("请输入奖励价格")
					return false
				}
				let arr = []
				this.ossFileUploads.forEach(item=>{
					arr.push(item.filePath.url)
				})
				submit_teacher_detail({
					content:this.content,
					images:arr.join(),
					video:this.videourl,
					is_need_video:this.is_need_video,
					price:this.price,
					duration:this.duration,
					teacher_id:this.listid
				}).then(res => {
					if(res.data.code==1){
						this.payorder(res.data.data.id)
					}else{
						this.$message.error(res.data.msg)
					}
				})
			},
			payorder(id){
				gotopay({
					teacher_question_id:id,
					platform:"pc",
					pay_type:this.pay_type,
				}).then(resp => {
					if(resp.data.code==1){
						this.$message.success(resp.data.msg)
						setTimeout(()=>{
							this.$router.go(-1)
						},1000)
					}else{
						this.$message.error(resp.data.msg)
					}
				}).catch(err => {
					this.$message.error(err.data.msg)
				})
			},
			getDetail() {
				teacher_detail({
					id: this.listid
				}).then(res => {
					this.dataAll = res.data.data
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.way {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #EAEAEA;
	}
	
	.wayActive {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
	}
	
	.weixinImg {
		width: 14px;
		min-width: 14px;
		height: 12px;
		margin-right: 5px;
	}
	
	.balanceImg {
		width: 14px;
		min-width: 14px;
		height: 14px;
		margin-right: 5px;
	}
	.userImg {
		width: 80px;
		min-width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.stateBox {
		width: 16px;
		height: 16px;
		background: #00E3BA;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		position: absolute;
		right: -2px;
		bottom: 10px;
	}

	.width43 {
		width: 43%;
	}

	.width50 {
		width: 48%;
	}

	::v-deep .el-textarea {
		width: 35%;
	}

	.noImage {
		width: 76px;
		min-width: 76px;
		height: 76px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.priceBox {
		width: 419px;
		height: 45px;
		line-height: 40px;
		background: rgba(217, 217, 217, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		padding-left: 20px;

		input {
			width: 100%;
		}
	}

	.noActive {
		padding: 10px;
		background: rgba(217, 217, 217, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #E2DEDE;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	.active {
		padding: 10px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	.submitBox {
		width: 239px;
		height: 47px;
		text-align: center;
		line-height: 47px;
		background: #3478F5;
		border-radius: 8px 8px 8px 8px;
		font-size: 18px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>